import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import { DNavBar, DCarInfo, DItemError, DModal, Ddialog } from '@/components'
import http from '@/api'
import common from '@/common'
import './index.scss'

export default class Index extends Component {

    constructor(props) {
        super(props)
        this.state = {
            active: 0,
            isShow: false,
            scrollHeight: window.screen.availHeight,
            id: '',
            handle: '',
            currPage: 1,
            totalPage: 1,
            pageSize: 10,
            status: false,
            list: [],
            itemId: '',
            showAuthTip: false
            // showAccDialog: false,
            // accContent: '企业账户未开通电子收款账户，将会影响企业收款，是否前往开通？',
            // imIdStatus: '', // 用户身份 0：未认证 1：企业管理员，2：企业员工
        }
    }

    componentWillMount() {
        // this.httpMySearchCarList()
        let { active = 0 } = this.$router.params
        this.handleClick(+active)
    }

    componentDidShow() {
        this.setState({
            list: [],
            currPage: 1,
            totalPage: 1,
            status: false
        }, () => {
            this.httpMySearchCarList()
        })
    }

    //寻车详细
    handleDetail(item) {
        let { active } = this.state
        if (active === 1) {
            return Taro.showToast({
                title: '该寻车已过期',
                icon: 'none'
            })
        }
        Taro.navigateTo({
            url: `/pages/detail/detail?id=${item.id}&status=${active + 1}`
        })
    }
    //切换tab
    handleClick(active) {
        this.setState({
            list: [],
            currPage: 1,
            totalPage: 1,
            active,
            status: false
        }, () => this.httpMySearchCarList())
    }

    //发布寻车
    async onHandleForm() {
        const { eaIsAppro } = await http.getConfirmInfo()
        const { imIdStatus } = await http.myselfDetail()

        if (eaIsAppro == 1 || imIdStatus == 2) {
            Taro.navigateTo({
                url: `/pages/carform/carform?status=${1}`
            })
        } else {
            this.setState({
                showAuthTip: true
            })
        }

    }

    onCancel() {
        this.setState({
            showAuthTip: false
        })
    }
    onSure() {
        this.onCancel()
        Taro.navigateTo({
            url: `/pages/myinfo/authentication`
        })
    }

    httpMySearchCarList = (isAppend = false) => {
        const { pageSize, currPage, totalPage, active } = this.state
        if (currPage > totalPage) {
            return this.setState({
                status: true
            })
        }
        let _http
        if (!active) {
            _http = http.getMySearchCarList({
                pageSize,
                page: currPage
            })
        } else {
            _http = http.getMySearchCarListTakeOff({
                pageSize,
                page: currPage
            })
        }
        _http.then(res => {
            if (isAppend) {
                const { list } = this.state
                res.list = [...list, ...res.list]
            }
            this.setState({
                ...res,
                status: false
            })
        })
    }

    onFirstClick(item) {
        const { active } = this.state
        if (active === 0) {
            this.setState({
                isShow: true,
                handle: '终止',
                itemId: item.id
            })
        } else if (active === 1) {
            this.setState({
                isShow: true,
                handle: '删除',
                itemId: item.id
            })
        }

    }

    onScrollEnd = () => {
        this.setState({
            currPage: this.state.currPage + 1
        }, () => this.httpMySearchCarList(true))
    }

    //关闭改价框/模态框
    onCancelHandle = () => {
        this.setState({
            isShow: false
        })
    }

    //模态框确认按钮
    onDelHandle() {
        this.onCancelHandle()
        const { itemId, active } = this.state
        if (active === 0) {
            http.stopMySearchCarTakeOff({
                id: itemId
            }).then(res => {
                if (res) {
                    Taro.showToast({
                        title: '终止成功！',
                        duration: 800
                    }).then(() => {
                        setTimeout(() => {
                            this.setState({
                                currPage: 1,
                                list: [],
                                totalPage: 1
                            }, () => {
                                // this.httpMySearchCarList()
                                Taro.redirectTo({
                                    url: `/pages/index/index?active=1`
                                })
                            })
                        }, 1000)
                    })
                } else {
                    Taro.showToast({
                        icon: 'none',
                        title: '终止失败！'
                    })
                }
            })
        } else if (active === 1) {
            http.delMySearchCar({ id: itemId }).then(res => {
                if (res) {
                    Taro.showToast({
                        title: '删除成功！',
                        duration: 800
                    }).then(() => {
                        setTimeout(() => {
                            this.setState({
                                currPage: 1,
                                list: [],
                                totalPage: 1
                            }, () => {
                                this.httpMySearchCarList()
                            })
                        }, 1000)
                    })
                } else {
                    Taro.showToast({
                        icon: 'none',
                        title: '删除失败！'
                    })
                }
            })

        }
    }

    render() {
        const tabList = [{ title: '正在寻车' }, { title: '已过期' }]
        const {
            active,
            list,
            isShow,
            handle,
            scrollHeight,
            status,
            showAuthTip
            // accContent,
            // showAccDialog,
            // imIdStatus
        } = this.state
        return (
            <View className='b_index'>
                <DNavBar title={'我的寻车'}></DNavBar>
                <View className='b_index__box'>
                    <View className='b_index__content'>
                        <AtTabs tabDirection='horizontal' swipeable={true} current={active} tabList={tabList} onClick={this.handleClick.bind(this)}>
                            {
                                tabList.map((tab, i) => <AtTabsPane current={active} index={i}>
                                    <ScrollView
                                        scrollY
                                        scrollWithAnimation
                                        lowerThreshold='20'
                                        style={`height:${scrollHeight - 100}PX`}
                                        onScrollToLower={this.onScrollEnd}
                                    >
                                        {
                                            list && list.map((item, i) => {
                                                return <DCarInfo
                                                    key={i}
                                                    // 该字段尚不明确
                                                    place={item.carTransAddr ? '卖' + item.carTransAddr : '---'}
                                                    nameList={[item.carDataModel]}
                                                    infoList={[item.carSourceType, item.carEmissionStd, '外观颜色:', item.carOutColor]}
                                                    carmoney={item.carOfferPrice}
                                                    icon={item.icon}
                                                    company={item.entName + '(' + item.entDis + ')'}
                                                    clock={item.ago}
                                                    item={item}
                                                    money={item.carGuiPrice}
                                                    firstClick={this.onFirstClick.bind(this, item)}
                                                    firstText={active ? '删除' : '终止寻车'}
                                                    onDetail={this.handleDetail.bind(this, item)}
                                                ></DCarInfo>
                                            })
                                        }
                                        {
                                            list.length > 0 && status && <View className='b_index__more'>暂无更多</View>
                                        }
                                    </ScrollView>
                                </AtTabsPane>)
                            }
                        </AtTabs>
                    </View>
                </View>

                {
                    list.length === 0 && <DItemError></DItemError>
                }

                <View>
                    <DModal
                        isShow={isShow}
                        text={`您确认${handle}该车源信息？`}
                        onFirst={this.onCancelHandle.bind(this)}
                        onLast={this.onDelHandle.bind(this)}
                        onCancel={this.onCancelHandle.bind(this)}></DModal>
                </View>
                <View className='b_index__createform' onClick={this.onHandleForm.bind(this)}>
                    <View className='b_index__createform_box'>
                        <View className='b_index__createform_font'>发起</View>
                        <View className='b_index__createform_font'>寻车</View>
                    </View>
                </View>

                <Ddialog isShow={showAuthTip} content="为了您的交易安全，请进行信息认证 信息认证后可或得更多权限" btnText="信息认证" onCancel={this.onCancel.bind(this)} onSure={this.onSure.bind(this)}></Ddialog>
                {/* <Ddialog isShow={showAccDialog} content={accContent} btnText={imIdStatus == 2 ? '我知道了' : '前往开通'} onCancel={this.onCancel.bind(this)} onSure={this.onSure.bind(this)}></Ddialog> */}
            </View>
        )
    }
}
